<script lang="ts" setup>
import hotTopic from '@/components/topic/topic.vue'
import { ref } from 'vue'

// 用户发布的图片
const userImageData = ref([
    { id: 1, url: '/static/user/user.jpg' },
    { id: 2, url: '/static/user/user.jpg' },
])

const interactionItems = ref([
    { id: 1, type: 'icon-fenxiang', text: '分享' },
    { id: 2, type: 'icon-xinxi', text: '3' },
    { id: 3, type: 'icon-aixin', text: '20' },
])


// 举报
const showActionSheet = () => {
    uni.showActionSheet({
        itemList: ['举报'],
        success: (success) => {
            console.log(success)
            if (success.tapIndex === 0){
                // 记得传递 id
            uni.navigateTo({
                url: '/pages-sub/complaint',
            })
            }
        },
    })
}


// 预览图片
const previewImage = (index: number) => {
    const urls = userImageData.value.map(item => item.url);
    uni.previewImage({
        current: index,  // 直接使用索引
        urls: urls,
    });
}
</script>

<template>
    <view class="forum" v-for="item in 3" :key="item">
        <!-- 头像 -->
        <view class="forum-user">
            <view class="forum-character">
                <image class="forum-character-image" src="/static/user/user.jpg" mode="scaleToFill" />
                <view class="forum-character-text">
                    <h3 class="forum-character-text-h3">杨可可</h3>
                    <text class="forum-character-text-introduction">大四 视觉传达 2分钟前</text>
                </view>
            </view>
            <!-- 图标 -->
            <uni-icons @click="showActionSheet" custom-prefix="iconfont" type="icon-iosgengduo" size="25"></uni-icons>
        </view>
        <!-- 内容 -->
        <view class="forum-content">
            <h2 class="forum-content-h2">毕业快乐</h2>
            <scroll-view class="forum-scroll" scroll-x show-scrollbar style="white-space: nowrap;">
                <view class="forum-content-grid">
                    <image v-for="(item, index) in userImageData" :key="item.id" @click="previewImage(index)"
                        class="forum-content-grid-image" :src="item.url" mode="aspectFill" />
                </view>
            </scroll-view>

            <!-- 话题 -->
            <hotTopic />

            <!-- 分享 聊天 点赞 -->
            <view class="forum-interaction">
                <view class="forum-interaction-icon" v-for="item in interactionItems" :key="item">
                    <uni-icons custom-prefix="iconfont" color="#7f7f7f" :type="item.type" size="20"></uni-icons>
                    <text class="forum-interaction-icon-text">{{ item.text }}</text>
                </view>
            </view>
            <!-- 线 -->
            <view class="forum-line"></view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.forum {
    margin-top: 10rpx;

    // user
    &-user {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &-character {
        margin-top: 30rpx;
        display: flex;
        align-items: center;

        &-image {
            width: 87rpx;
            height: 87rpx;
            border-radius: 100%;
        }

        &-text {
            margin-left: 20rpx;

            &-h3 {
                font-size: 30rpx;
            }

            &-introduction {
                font-size: 25rpx;
                color: #9ba2ac;
            }

        }
    }

    // 内容
    &-content {
        margin-top: $uni-margin-top;

        &-h2 {
            font-size: 32rpx;
        }

        // 图片 超出3张换行
        &-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 10rpx;
            /* 图片间距 */

            &-image {
                width: 32%;
                height: 230rpx;
                margin-top: $uni-margin-top ;
                border-radius: $uni-border-radius;
            }
        }
    }

    .forum-scroll {
        width: 100%;
        margin-top: $uni-margin-top;

        .forum-content-grid {
            display: inline-block; // 关键样式，使内容横向排列
            white-space: nowrap; // 禁止换行

            &-image {
                display: inline-block;
                width: 230rpx;
                height: 230rpx;
                margin-right: 10rpx; // 图片间距
                border-radius: $uni-border-radius;

                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }

    // 社交
    &-interaction {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: $uni-margin-top1;


        &-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 5rpx;

            &-text {
                font-size: 25rpx;
                color: #7f7f7f;
            }
        }
    }

    // 下划线
    &-line {
        width: 100%;
        height: 1rpx;
        margin-top: 30rpx;
        background-color: #f4f4f4;
    }

}
</style>